<template>
  <view class="u-demo-block">
    <view class="u-demo-block__content ">
      <view class="u-page__upload-item ">
        <u-upload
          :fileList="fileList6"
          @afterRead="afterRead"
          @delete="deletePic"
          name="3"
          :multiple="multiple"
          width="160"
          height="160"
          :maxCount="6"
          uploadText=""
          action="https://yft.xibuts.cn/Uploads/imageUploads"
        ></u-upload>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "upload",
  data(){
    return{
      fileList6: [],
    }
  },
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
  },
  methods:{
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      console.log(event)
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].thumb)
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: 'https://yft.xibuts.cn/Uploads/imageUploads', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          formData: {
            user: 'test'
          },
          success: (res) => {
            setTimeout(() => {
              resolve(res.data.data)
            }, 1000)
          }
        });
      })
    },
  },
}
</script>

<style lang="scss">
.u-upload{
  .u-add-wrap{
    background: #FFFFFF !important;
    border: 2rpx dashed #45806E;
    border-radius: 16rpx;
  }
}
  .u-list-item{
    background: #FFFFFF;
    border: 2rpx dashed #45806E;
    border-radius: 16rpx;
  }
  .uicon-plus{
    font-size: 46rpx !important;
    color: #45806E;
    margin-top: 20rpx;
  }
</style>